<!--
 * @Author: your name
 * @Date: 2020-06-26 11:49:41
 * @LastEditTime: 2020-06-28 15:29:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\danger\trouble\reporter.vue
-->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.companyId" placeholder="所属单位" clearable class="filter-item">
        <el-option
          v-for="item in enterpriseList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-date-picker
        v-model="listQuery.startDate"
        type="date"
        value-format="yyyy/MM/dd"
        placeholder="检查开始时间"
        class="filter-item"
      ></el-date-picker>
      <el-date-picker
        v-model="listQuery.overDate"
        type="date"
        value-format="yyyy/MM/dd"
        placeholder="检查结束时间"
        class="filter-item"
      ></el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="handleQuery" class="filter-item">查询</el-button>
      <el-button type="primary" icon="el-icon-search" @click="printHtml" class="filter-item">打印报表</el-button>
    </div>
    <div style="text-align:center" id="printContent">
      <div class="dangerTable">
        <h4 class="tableTitle">安全检查隐患汇总表</h4>
        <h5 class="tableSecondTitle">检查日期：{{listQuery.startDate}}至{{listQuery.overDate}}</h5>
        <table class="innerTable">
          <tr>
            <th>序号</th>
            <th>隐患照片</th>
            <th>存在问题</th>
            <th>整改措施</th>
            <!-- <th>法规、标准依据</th> -->
            <th>单位</th>
            <th>检查人</th>
          </tr>
          <template v-if="dangerList&&dangerList.length>0">
            <tr v-for="(item,index) in dangerList" :key="index">
              <td>{{index+1}}</td>
              <template v-if="item.pics&&item.pics.length>0">
                <td>
                  <img
                    class="picSize"
                    :src="'/api'+pic"
                    alt
                    v-for="(pic,index2) in item.pics"
                    :key="index2"
                  />
                </td>
              </template>
              <template v-else>
                <td>无图片</td>
              </template>
              <td>{{item.dangerContent}}</td>
              <template v-if="item.recitfyContents&&item.recitfyContents.length>0">
                <td>
                  <span v-for="(text,index3) in item.recitfyContents" :key="index3">{{text}},</span>
                </td>
              </template>
              <template v-else>
                <td>无内容</td>
              </template>
              <!-- <td>测试</td> -->
              <td>{{item.companyName}}</td>
              <td>{{item.checkPersonName}}</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="6">无数据显示</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import print from 'print-js'
// import { parseTime } from '@/utils'
import { fetchTroubleTable } from '@/api/troubles'
import { fetchEnterpriseListByUser } from '@/api/enterprise'
import ThemePicker from '@/components/ThemePicker'
export default {
  created() {
    const id = this.$route.params && this.$route.params.id
    // this.fetchUserData(id)
    this.tempRoute = Object.assign({}, this.$route)
    // console.log('taskId', id)
    this.getEnterpriseList()
  },
  data() {
    return {
      enterpriseList: [],
      dangerList: [],
      listQuery: {
        companyId: '',
        startDate: null,
        overDate: null
      }
    }
  },
  methods: {
    getEnterpriseList() {
      fetchEnterpriseListByUser().then((response) => {
        // console.log(response.data)
        this.enterpriseList = response.data
      })
    },
    getDangerList() {
      fetchTroubleTable(this.listQuery).then((response) => {
        // console.log(response.data)
        this.dangerList = response.data
        console.log(this.dangerList)
      })
    },
    handleQuery() {
      this.getDangerList()
    },
    printHtml() {
      const style = `@page { margin: 0 } @media print {
        .dangerTable {
            padding: 5px 15px;
          }
          .innerTable {
            width: 99%;
          }
          .tableTitle {
            margin: 5px;
          }
          .tableSecondTitle {
            margin: 5px;
            text-align: right;
          }
          table,
          table tr th,
          table tr td {
            border-spacing: 0;
            border: 0.8px solid #000;
            font-size: 14px;
            font-weight: normal;
          }
          .picSize {
            width: 100px;
            height: 100px;
          }
       }` //自定义样式
      print({
        printable: 'printContent', //要打印内容的id
        type: 'html',
        style: style,
        scanStyles: false,
        showModal: true,
        modalMessage: '请等待，页面信息较大正在处理中...',
        onError: function(err) {
          console.log('打印失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/print.min.css';
.dangerTable {
  padding: 5px 15px;
}
.innerTable {
  width: 99%;
}
.tableTitle {
  margin: 5px;
}
.tableSecondTitle {
  margin: 5px;
  text-align: right;
}
table,
table tr th,
table tr td {
  border-spacing: 0;
  border: 0.8px solid #000;
  font-size: 14px;
  font-weight: normal;
}
.picSize {
  width: 100px;
  height: 100px;
}
</style>
